<template>
    <div class="my-center-header">
        <white-space/>
        <wing-blank class="my-center-header-l1">
            <van-image round fit="cover" width="56px" height="56px" :src="customer.avatar"
                       @click.stop="handleRouteToCustomer"/>
            <wing-blank class="customer-nickname" @click.stop="handleRouteToCustomer">{{customer.nickname}}</wing-blank>
        </wing-blank>
        <white-space/>
        <van-tabbar :fixed="false" :border="false" active-color="#7d7e80" class="my-center-header-l2">
            <van-tabbar-item to="/follow-products">
                <template #default>商品关注</template>
                <template #icon>{{followingProductCount}}</template>
            </van-tabbar-item>
            <van-tabbar-item to="/follow-stores">
                <template #default>店铺关注</template>
                <template #icon>{{followingStoreCount}}</template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleContentClick">
                <template #default>喜欢的内容</template>
                <template #icon>0</template>
            </van-tabbar-item>
            <van-tabbar-item to="/browsing-products">
                <template #default>浏览记录</template>
                <template #icon>{{browsingProductCount}}</template>
            </van-tabbar-item>
        </van-tabbar>
        <white-space/>
    </div>
</template>

<script>
  import WingBlank from "../../components/WingBlank"
  import { browsing, customer, follow, security } from "@mall/api-services"
  import { Icon, Image, Tabbar, TabbarItem, Toast } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"

  export default {
    name: "MyCenterHeader",
    components: {
      WhiteSpace,
      WingBlank,
      [Image.name]: Image,
      [Icon.name]: Icon,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    computed: {
      customerId() {
        return security.SecurityUserHolder.getUserId()
      },
    },
    data() {
      return {
        customer: new customer.Customer(),
        followingProductCount: 0,
        browsingProductCount: 0,
        followingStoreCount: 0,
      }
    },
    created() {
      this.refreshCustomer()
      this.refreshFollowingCounts()
      this.refreshBrowsingCount()
    },
    methods: {
      refreshCustomer() {
        const { customerId } = this
        customer.CustomerServiceV1.getCustomer(customerId)
          .then(aCustomer => this.customer = aCustomer)
      },
      refreshFollowingCounts() {
        const { customerId } = this
        follow.FollowServiceV1.getFollowingProductCount(customerId)
          .then(count => this.followingProductCount = count)
        follow.FollowServiceV1.getFollowingStoreCount(customerId)
          .then(count => this.followingStoreCount = count)
      },
      refreshBrowsingCount() {
        const { customerId } = this
        browsing.BrowsingProductServiceV1.getBrowsingProductCount(customerId)
          .then(count => this.browsingProductCount = count)
      },
      handleContentClick() {
        Toast({
          duration: 500,
          message: "正在开发中...",
        })
      },
      handleRouteToCustomer() {
        const { customerId } = this
        this.$router.push(`/customers/${customerId}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .my-center-header {

        .my-center-header-l1 {
            display: flex;
            align-items: center;

            .customer-nickname {
                font-size: 18px;
                font-weight: 700;
            }
        }

        .my-center-header-l2 {
            background: transparent;
        }

    }
</style>
